import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex } from 'antd';
import Style from './login.module.scss';
import { cryptoMD5 } from '@/utils/cryptoMD5';
import axios from '@/utils/axios';
import { useDispatch } from 'react-redux';
import { setToken } from '@/store/modules/user'
import { message } from 'antd'; // 使用 Ant Design Vue 的提示框
import { useNavigate } from 'react-router-dom';
type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};
type ResToken={
  code:number,
  data:string
}
const LoginForm: React.FC = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate(); 
  const onFinish = async (values: any) => {
    console.log('Received values of form: ', values);
    const { username, password } = values;
    const res:ResToken = await axios.post("api/ofa-admin/login",{username,password:cryptoMD5(password)});
    if (res.code===200) {
      message.success('登陆成功')
      dispatch(setToken(res.data));
      navigate('/')
    }
};
  return (
  <div>
  <Form
      name="login"
      initialValues={{ remember: true }}
      style={{ maxWidth: 360 }}
      onFinish={onFinish}
    >
      <Form.Item
        name="username"
        rules={[{ required: true, message: '请输入账号' }]}
      >
        <Input prefix={<UserOutlined />} size={'middle'} placeholder="Username" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[{ required: true, message: '请输入密码' }]}
      >
        <Input prefix={<LockOutlined />} type="password" placeholder="Password" />
      </Form.Item>
      <Form.Item>
        <Flex justify="space-between" align="center">
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>记住密码</Checkbox>
          </Form.Item>
          <a href="">忘记密码</a>
        </Flex>
      </Form.Item>
      <Form.Item>
        <Button block type="primary" htmlType="submit">
          登陆
        </Button>
      </Form.Item>
    </Form>
  </div>
)};

const Login=()=>{
  
  return <div className={Style.container}>
    <div className={Style.main}>
    <div className={Style.backgroundImg}>
    </div>
    <div className={Style.loginPanel}>
      <LoginForm />
    </div>
  </div>
  </div>;
}

export default Login;